<template>
  <div class="attachment-page">
    <div class="attachment-left">
      <div class="attachment-header">
        <a-button type="link" @click="downloadAll"> <i class="iconfont icon-download-2-line"></i>全部下载</a-button>
      </div>
      <div class="attachment-content my-scrollbar">
        <div v-for="(item, index) in attachmentList" :key="index" class="attachment-list">
          <div class="attachment-content-left">
            <i class="iconfont icon-file-line"></i>
            <p class="attachment-content-left-text elliptical-1" :title="item.fileName">{{ item.fileName }}</p>
          </div>
          <div class="file-size">{{ sizeFilter(~~item.size) }}</div>
          <a-button class="link-down" type="link" @click="downLoads(item)">下载</a-button>
        </div>
      </div>
    </div>
    <div class="attachment-right">
      <page-right-list :text-content="spans" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { sizeFilter } from 'g6-fn'
  import { onMounted } from 'vue'

  import manualMessage from '@/components/ManualMessage/index'
  import { fetchDownload } from '@/services/api'

  import { FilesStatusType } from '../../types/index'
  import PageRightList from './PageRightList.vue'

  export interface DataSetCardProps {
    spans?: any
    attachmentList?: FilesStatusType[]
  }
  let props = withDefaults(defineProps<DataSetCardProps>(), {
    spans: {},
    attachmentList: () => []
  })
  onMounted(() => {})

  // 全部下载
  const downloadAll = async () => {
    manualMessage.loading('数据准备中,请耐心等待...', 0)
    const downloadPromiseList = props.attachmentList.map((item: FilesStatusType) => fetchDownload(item.url, `${item.fileName}`))
    Promise.all(downloadPromiseList)
      .finally(() => {
        manualMessage.destroy()
      })
      .then(() => {
        message.success({ content: '文件下载成功', icon: '', key: 'downloading', duration: 3 })
      })
      .catch(() => {
        message.error('下载失败,文件可能损坏')
      })
  }
  // 单个下载
  const downLoads = async (obj: FilesStatusType) => {
    try {
      manualMessage.loading('数据准备中,请耐心等待...', 0)
      await fetchDownload(obj.url, `${obj.fileName}`)
      manualMessage.destroy()
      console.log('下载成功')
      await message.success({ content: '文件下载成功', icon: '', key: 'downloading', duration: 3 })
    } catch (error: any) {
      manualMessage.destroy()
      message.error('下载失败,文件可能损坏')
    }
  }
</script>
<style lang="less" scoped>
  .attachment-page {
    display: flex;
    width: 100%;
    gap: 24px;

    .attachment-left {
      overflow: hidden;
      width: 1026px;
      background: @background1;
      border: 1px solid @border1;
      border-radius: 10px;
      flex-shrink: 0;

      .attachment-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 10px 40px 10px 24px;
        height: 56px;
        background: @background1;
        gap: 24px;
        align-self: stretch;
        border-bottom: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
      }

      .attachment-content {
        display: flex;
        align-items: flex-start;
        overflow-y: auto;
        padding: 10px 20px;
        width: 100%;
        max-height: 537px;
        flex-direction: column;
        align-self: stretch;

        .attachment-list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 20px 10px 12px;
          width: 100%;
          height: 40px;
          border-radius: 6px;
          box-sizing: border-box;
          cursor: pointer;
          flex-shrink: 0;

          .link-down {
            display: none;
          }

          .file-size {
            display: block;
            font-size: 14px;
            color: @text03;
            font-weight: 400;
            line-height: 22px;
          }

          .attachment-content-left {
            display: flex;
            gap: 8px;
            align-items: center;
            flex: 1;
            width: 95%;
            // min-width: 100%;

            > i {
              display: block;
              color: #649af0;
            }

            .attachment-content-left-text {
              flex: 1;
              color: @text01;
              .elliptical-1();
              .font14b();
            }
          }

          &:hover {
            background: rgba(0, 0, 0, 0.05);

            .link-down {
              display: block;
            }

            .file-size {
              display: none;
            }
          }
        }
      }
    }

    .attachment-right {
      overflow: hidden;
      width: 328px;
    }
  }

  .img {
    width: 100%;
    height: 100%;
  }

  .select-list {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    margin-top: 16px;
    width: 328px;
    height: 395px;
    max-height: 395px;
    background: #ebf0f7;
    border: 1px solid @border1;
    border-radius: 10px;
    flex-direction: column;
    gap: 12px;
    flex: 1 0 0;

    .select-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .header-text {
        display: flex;
        gap: 12.5px;
        align-items: center;

        .header-text-w {
          color: @text02;
          .font14b();
        }

        .open-attachment-num {
          color: @text03;
          .font14();
        }
      }
    }

    .line-svg {
      margin-bottom: 12px;
      width: 100%;
      height: 0;
      border-top: 1px solid @border1;
    }
  }
</style>
